<template>
  <div>
    <h1>我是day07组件</h1>
    <!-- <button @click="isShow=!isShow">点击显示隐藏</button> -->
    <!-- appear自动加载动画 -->
    <!-- <transition appear>
        <h1 v-show="isShow">你好</h1>
    </transition> -->
    <!-- name为设置多个过渡动画取别名 -->
    <!-- <transition name="app">
        <h1 v-show="isShow">今天学习过渡动画</h1>
    </transition> -->
    <!-- <transition-group>需要添加key值 -->
    <!-- <transition-group appear>
        <h1 v-show="isShow" key="1">你好</h1>
        <h1 v-show="isShow" key="2">今天学习过渡动画</h1>
    </transition-group> -->
    <!-- <transition-group name="apis">
        <h1 v-show="isShow" class="animate__animated animate__bounce" key="1">你好</h1>
        <h1 v-show="isShow" class="animate__animated animate__swing" key="2">今天学习过渡动画</h1>
    </transition-group> -->
    <!-- <transition-group name="apis animate__animated"
    enter-active-class="animate__swing"
    leave-active-class="animate__heartBeat"
    class="">
        <h1 v-show="isShow" key="1">你好</h1>
        <h1 v-show="isShow" key="2">今天学习过渡动画</h1>
    </transition-group> -->
    <button @click="func()">调取demo接口</button>
  </div>
</template>

<script>
import 'animate.css';
import axios from 'axios'
export default {
    name:"MyDay07",
    data() {
        return {
            isShow:true,
        }
    },
    methods:{
        // xhr
        // ajax
        // axios
        // fetch
        // 写了await必须写async
        // 协议 域名 端口
        // 跨域 http://localhost:80 http://localhost:90
        // cors(nodejs开启跨域) jsonp(jq中跨域) 代理(proxy) nginx(java使用) 解决跨域问题的几种方案
         func(){
            // const res = await axios.get('http://127.0.0.1:8080/student')
            // console.log(res);
         axios.get('http://10.11.136.77:8080/api/student').then((res)=>{
            console.log(res);
         },(err)=>{
            console.log(err);
         })

        }
    }
}
</script>

<style>
/* .v-enter{
    animation: move 3s linear;
} */
.v-enter-active{
    animation: move 3s linear;
}
.app-leave-active{
    animation: move 3s linear;
}
/* .v-enter-to{
    animation: move 3s linear;
} */
/* .v-leave{
    animation: move 3s linear reverse;
} */
/* .v-leave-active{
    animation: move 3s linear reverse;
}
.v-leave-to{
    animation: move 3s linear reverse;
} */
@keyframes move {
    0%{
        color:red;
        transform: translateX(0px);
    }
    100%{
        color:orange;
        transform: translateX(100px);
    }
}
</style>